<template>
  <div class="dashboard">
    <div>
      <homeproject ref="homeproject" />
      <system ref="system" />
    </div>
    <div>
      <mycommission ref="mycommission" />
      <environmentalTest ref="environmentalTest" />
    </div>
    <div>
      <people ref="people" />
      <device ref="device" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Homeproject from './components/project'
import Mycommission from './components/mycommission'
import System from './components/system'
import EnvironmentalTest from './components/environmentalTest'
import People from './components/people'
import Device from './components/device'

export default {
  name: 'Dashboard',
  components: {
    Homeproject,
    Mycommission,
    System,
    EnvironmentalTest,
    People,
    Device
  },
  computed: {
    ...mapGetters([
      'projectsId'
    ])
  },
  watch: {
    projectsId(old, val) {
      location.reload()
      // this.$refs.homeproject.fetchData()
      // this.$refs.mycommission.getList()
      // this.$refs.mycommission.getneedDoHome()
      // this.$refs.system.getList()
      // this.$refs.device.getList()
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.dashboard {
  display: flex;
  margin: 21px 18px 0 18px;
  div{
    width:100%;
    background:rgba(23, 27, 35, 0.36);
    margin-right: 15px;
  }
}
</style>
